<template>
  <div style="width:100%;height:100%;">
    <div class="contentDialog4">
      <div class="row1">
        <Model1 ref="Model1" :rail-types="railTypes" :ctype="type" @dailog4Click="dailog4Click" />
      </div>
      <div class="row2">
        <div class="column1">
          <Model2
            ref="Model2"
            :rail-types="railTypes"
            :site-name-year-list="siteNameYearList"
            :title="params.lineName"
            :ctype="type" />
        </div>
        <div class="column2">
          <Model3
            ref="Model3"
            :site-name-list="siteNameList"
            :ctype="type"
            :rail-types="railTypes" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { uncoveredAreaStationDetail } from '@/api/cms/index/index.js'
import Model1 from './dialog4/model1.vue'
import Model2 from './dialog4/model2.vue'
import Model3 from './dialog4/model3.vue'
export default {
  components: {
    Model1,
    Model2,
    Model3
  },
  props: {
    type: {
      type: String,
      default: ''
    },
    railTypes: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      params: {},
      siteNameYearList: [],
      siteNameList: []
    }
  },

  methods: {
    dailog4Click(val) {
      this.params = val
      uncoveredAreaStationDetail({
        beginYearMonth: val.date ? val.date[0] : '',
        endYearMonth: val.date ? val.date[1] : '',
        directionId: val.directionId,
        lineId: val.lineId,
        cType: this.type,
        railTypeList: this.railTypes.split(',')
      }).then(res => {
        this.siteNameYearList = res.data.siteNameYearList
        this.siteNameList = res.data.siteNameList
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.contentDialog4 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.row1 {
  height: 49%;
  width: 100%;
  background: #0f1f56;
  display: flex;
  justify-content: space-between;
}
.row2 {
  height: 49%;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
/deep/.el-date-editor .el-range-input {
  background: #0f1f56;
  color: #fff;
}
/deep/.el-range-editor--medium .el-range-separator {
  line-height: 1.8rem;
  color: #fff;
}
.column1 {
  width: 79%;
  height: 100%;
  background: #0f1f56;
}
.column2 {
  width: 20%;
  height: 100%;
  background: #0f1f56;
}
</style>
